<template>
  <div>
    <a-table
      ref="tableList"
      :columns="columns"
      :data-source="dataSource"
      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
      :row-key="record => record.video_goods_id"
      :pagination="{
        total: this.totalCount,
        showSizeChanger: true,
        onChange: this.tablePageChange,
        onShowSizeChange: this.paginationSizeChange
      }"
      :loading="loading"
      :customRow="
        (record, index) => {
          return {
            on: {
              mouseenter: e => {
                this.currentRowId = record.id
              }
            }
          }
        }
      "
    >
      <!-- 产品名称 -->
      <template slot="goods_name" slot-scope="text, goods">
        <div class="goods-info">
          <img class="goods-pic" :src="goods.cover_pic" alt="" />
          <div class="info-box">
            <a-tooltip placement="top">
              <template slot="title">
                <span class="goods-name">{{ goods.name }} </span>
              </template>
              <div style="font-weight: bold; line-height: 25px; width: 160px" class="of_el">
                {{ goods.name }}
              </div>
            </a-tooltip>
            <div style="color: rgb(140, 140, 140); width: 160px" class="of_el">
              {{ goods.cat ? goods.cat.map(item => item.name).join() : '暂无分类' }}
            </div>
          </div>
        </div>
      </template>

      <!-- 产品类型 -->
      <template slot="product_type" slot-scope="text">
        <span class="goods-type" v-if="text == 0">普通商品</span>
        <span class="goods-type" v-if="text == 1">酒店预约</span>
        <span class="goods-type" v-if="text == 2">服务预约</span>
        <span class="goods-type" v-if="text == 3">虚拟商品</span>
        <span class="goods-type" v-if="text == 4">积分商品</span>
      </template>

      <!-- 售价 -->
      <template slot="price" slot-scope="text, goods">
        <div class="goods-price-row">
          <span>{{ text }}</span>
        </div>
      </template>

      <!-- 库存 -->
      <template slot="goods_num" slot-scope="text, goods">
        <div class="goods-rest-row">
          <span>{{ text }}</span>
        </div>
      </template>

      <!-- 虚拟销量 -->
      <template slot="virtual_sales" slot-scope="text, goods">
        <div class="goods-virtual-row">
          <span>{{ text }}</span>
        </div>
      </template>

      <!-- 上下架 -->
      <a-switch
        slot="status"
        checked-children="上架"
        un-checked-children="下架"
        slot-scope="status, goods"
        :checked="status > 0"
        @change="onConfirmStatus(status, goods.video_goods_id)"
      />

      <!-- 操作 -->
      <span class="table-action" slot="action" slot-scope="text, goods">
        <a-dropdown>
          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="showQscode(goods.id)">小程序二维码</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="copyUrl(goods.id)">复制小程序链接</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="delGoodById(goods.video_goods_id)">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>

    <a-modal title="小程序二维码" :visible="showQrCode" @ok="showQrCode = false" @cancel="showQrCode = false">
      <div style="display: flex; justify-content: center">
        <img style="width: 300px; height: 300px" :src="this.qrcodeUrl" alt="" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getQr } from '@/api/goods/goods'
import { videoGoodsGoodsList, videoGoodsGoodsStatus, videoGoodsGoodsDel } from '@/api/videoClassify'

const columns = [
  {
    title: '商品ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '产品名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    scopedSlots: { customRender: 'goods_name' }
  },
  {
    title: '产品类型',
    dataIndex: 'product_type',
    key: 'product_type',
    scopedSlots: { customRender: 'product_type' }
  },
  {
    title: '售价',
    dataIndex: 'price',
    key: 'price',
    defaultSortOrder: '',
    sorter: (a, b) => a.price - b.price,
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    key: 'goods_num',
    defaultSortOrder: '',
    sorter: (a, b) => a.goods_num - b.goods_num,
    scopedSlots: { customRender: 'goods_num' }
  },
  {
    title: '虚拟销量',
    dataIndex: 'virtual_sales',
    key: 'virtual_sales',
    defaultSortOrder: '',
    sorter: (a, b) => a.virtual_sales - b.virtual_sales,
    scopedSlots: { customRender: 'virtual_sales' }
  },
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort'
  },
  {
    title: '上下架',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  props: {
    queryParam: {
      type: Object,
      default: () => {
        return {
          name: ''
        }
      }
    }
  },

  data() {
    return {
      currentRowId: '',
      columns,
      selectedRowKeys: [],
      goods_id: 0,
      visible: false,
      dataSource: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,

      loading: false,
      showQrCode: false,
      qrcodeUrl: ''
    }
  },

  mounted() {
    this.getGoodsData()
  },

  methods: {
    // 获取商品列表数据
    getGoodsData() {
      this.selectedRowKeys = []

      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      return videoGoodsGoodsList(newObj).then(res => {
        this.loading = false
        if (!res.code) {
          this.dataSource = res.data.data
          this.totalCount = res.data.totalCount
        }
      })
    },

    // 分页请求
    tablePageChange(e) {
      this.pageNo = e
      this.getGoodsData()
    },

    // 分页器页数修改回调
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getGoodsData()
    },

    // 复制小程序链接
    copyUrl(id) {
      this.$copyText(`goods/goods/goods?id=${id}`).then(
        () => {
          this.$message.success('复制成功！')
        },
        () => {
          this.$message.error('复制成功！')
        }
      )
    },

    // 小程序二维码
    showQscode(id) {
      const h = this.$createElement
      this.$message.loading({ content: '请求中...', key: 'qrcodeLoading' })
      getQr({
        id
      })
        .then(res => {
          if (res.code === 0) {
            console.log(res)
            const qrcodeUrl = res.data.qr_url

            this.showQrCode = true
            this.qrcodeUrl = qrcodeUrl
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
        .then(() => {
          this.$message.destroy()
        })
    },

    // 刷新数据
    refresh() {
      this.pageNo = 1
      this.getGoodsData()
    },

    // 表格选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // 删除数据
    delGoodById(id) {
      // this.$confirm({
      //   title: '是否删除该条数据?',
      //   onOk: () => {
      videoGoodsGoodsDel({
        id
      }).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.refresh()
        } else {
          this.$message.error(res.msg)
        }
      })
      //   },
      //   onCancel() {}
      // })
    },

    // 批量操作
    updateAll(type, status) {
      if (!this.selectedRowKeys.length) {
        this.$message.warn('请先勾选商品')
        return
      }
      let text = '删除'
      if (type === 'change') {
        text = parseInt(status) === 1 ? '上架' : '下架'
      }

      this.$confirm({
        title: '是否批量' + text + '?',
        onOk: () => {
          if (type === 'change') {
            let newIds = this.dataSource.filter(
              el => String(el.status) !== status && this.selectedRowKeys.indexOf(el.video_goods_id) !== -1
            )

            if (!newIds.length) {
              this.$message.error('请选择符合条件的选项!')
              return
            }
            this.videoGoodsGoodsStatus(
              status,
              newIds.map(el => el.video_goods_id)
            )
            return
          }

          this.delGoodById(this.selectedRowKeys)
        },
        onCancel() {}
      })
    },

    // 上下架
    videoGoodsGoodsStatus(status, id) {
      videoGoodsGoodsStatus({ id, status }).then(res => {
        if (res.code === 0) {
          this.refresh()
          this.$message.success(res.msg)
          return
        }

        this.$message.error(res.msg)
      })
    },

    // 单个状态处理
    onConfirmStatus(status, id) {
      let newStatus = String(status) === '1' ? '0' : '1'
      this.videoGoodsGoodsStatus(newStatus, id)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-table-body::-webkit-scrollbar {
  display: none; /*ChromeSafari*/
}

.of_el {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table_operator_icon {
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}

.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.goods-price-row {
  position: relative;
  display: inline-block;
  .row-price-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-type {
  min-width: 60px;
  display: inline-block;
}
.table-action {
  min-width: 93px;
  display: inline-block;
}
</style>
